/**
 * Created by jinglupeng on 2/12/16.
 */

var TodoList = React.createClass({
    render: function () {
        var createItem = function (item) {
            return <li key={item.id}>{item.text}</li>;
        };
        return <ul> {this.props.items.map(createItem)}</ul>;
    }
});

var TodoApp = module.exports = React.createClass({
    getInitialState: function () {
        return {items: [], text: ''};
    },
    onChange: function (event) {
        this.setState({text: event.target.value});
    },
    handleSubmit: function (event) {
        event.preventDefault();
        var nextItems = this.state.items.concat([{
            text: this.state.text,
            id: Date.now()
        }]);
        var nextText = '';
        this.setState({
            items: nextItems,
            text: nextText
        });
    },
    render: function () {
        return <div>
            <label>Todo</label>
            <TodoList items={this.state.items}/>

            <form onSubmit={this.handleSubmit}>
                <input onChange={this.onChange} value={this.state.text}/>
                <button>{'Add #' + (this.state.items.length + 1) }</button>
            </form>
        </div>;
    }

});